<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/templates/template.xhtml">
	<ui:define name="pageTitle">Formação de Equipes</ui:define>
	<ui:define name="pageHeader">Formação de Equipes</ui:define>
	<ui:define name="body">

		<h:form id="equipeForm">

			<p:panel header="Equipe" id="panelEquipe">

				<h:panelGrid columns="3">

					<h:panelGrid columns="1" id="gridSelecionaEquipe" width="150">
						<h:outputText value="Selecione:  " />

						<h:selectOneListbox value="#{equipeAtletaBean.equipeSelecionada}" size="5" title="Equipes" style=" width : 169px;" >
							<f:selectItem itemLabel="nenhum" />
							<f:selectItems value="#{equipeAtletaBean.equipesList}" />
							<f:converter converterId="equipeConverter" />
							<p:ajax event="change" update="gridDescEquipe, gridAtletasEquipes" />
						</h:selectOneListbox>

					</h:panelGrid>

					<h:panelGrid id="gridDescEquipe" columns="1" width="222px">

						<h:panelGrid columns="2">
							<h:outputText value="Nome: " />
							<h:outputText value="#{equipeAtletaBean.equipeSelecionada.nome}" style="color:#B52C07;" />

							<h:outputText value="Esporte: " />
							<h:outputText value="#{equipeAtletaBean.equipeSelecionada.esporte.nome}" style="color:#B52C07;" />

							<h:outputText value="Atletas:" />
							<h:outputText value="#{equipeAtletaBean.equipeSelecionada.atletas.size()}" style="color:#B52C07;" />

							<h:outputText value="Status:" />
							<h:outputText value="#{equipeAtletaBean.equipeSelecionada.statusTreinamento}" style="color:#B52C07;" />

							<h:outputText value="Ativa:" />
							<h:outputText value="#{equipeAtletaBean.equipeSelecionada.ativa}" style="color:#B52C07;" />
						</h:panelGrid>

					</h:panelGrid>

					<p:dataTable id="gridAtletasEquipes" value="#{equipeAtletaBean.equipeSelecionada.atletas}" var="atletaDaEquipe" scrollable="true" scrollHeight="120" >
	
						<p:column headerText="Atleta" style="width: 60%">
							<h:outputText value="#{atletaDaEquipe.nome}" />
						</p:column>
	
						<p:column headerText="Nascimento">
							<h:outputText value="#{atletaDaEquipe.dataNascimento}" />
						</p:column>
	
						<p:column headerText="Ações" style="width: 7%">
							<h:commandLink action="#">
								<center>
									<h:graphicImage library="images" name="remove-icon-16px.png" />
								</center>
							</h:commandLink>
						</p:column>
	
					</p:dataTable>

				</h:panelGrid>
				
			</p:panel>
			
<!-- 			========================================= Atleta ========================================== -->

			<p:panel header="Atleta" id="panelAtleta">
				
				<h:panelGrid columns="2">
				
					<h:panelGrid columns="1" width="400px">
						
						<h:outputText value="Selecione: " />
						
						<h:selectOneMenu value="#{equipeAtletaBean.atletaSelecionado}" editable="true" style=" width : 300px;">
							<f:selectItem itemLabel="nenhum" />
							<f:selectItems value="#{equipeAtletaBean.atletasList}" />
							<f:converter converterId="atletaConverter" />
							<p:ajax event="change" update="gridDescAtleta, gridEquipesDoAtleta" />
							<p:ajax event="keyup" update="gridDescAtleta, gridEquipesDoAtleta" />
						</h:selectOneMenu>
	
						<h:panelGrid id="gridDescAtleta" columns="1">
						
							<h:panelGrid columns="2" >
						
								<h:outputText value="Matrícula: " />
								<h:outputText value="#{equipeAtletaBean.atletaSelecionado.matricula}" style="color:#B52C07;" />
			
								<h:outputText value="Nascimento: " />
								<h:outputText value="#{equipeAtletaBean.atletaSelecionado.dataNascimento}" style="color:#B52C07;" />
			
								<h:outputText value="Endereço: " />
								<h:outputText value="#{equipeAtletaBean.atletaSelecionado.endereco.logradouro}" style="color:#B52C07;" />
			
								<h:outputText value="Equipes: " />
								<h:outputText value="#{equipeAtletaBean.atletaSelecionado.equipes.size()}" style="color:#B52C07;" />
						
							</h:panelGrid>	
	
						</h:panelGrid>


					</h:panelGrid>

					<p:dataTable id="gridEquipesDoAtleta" value="#{equipeAtletaBean.atletaSelecionado.equipes}" var="equipeDoAtleta" scrollable="true" scrollHeight="120" >
					
						<p:column headerText="Equipe">
							<h:outputText value="#{equipeDoAtleta.nome}" />
						</p:column>
						
						<p:column headerText="Esporte">
							<h:outputText value="#{equipeDoAtleta.esporte.nome}" />
						</p:column>
						
						<p:column headerText="Ações" style="width: 7%">
							<h:commandLink action="#">
								<center>
									<h:graphicImage library="images" name="remove-icon-16px.png" />
								</center>
							</h:commandLink>
						</p:column>
											
					</p:dataTable>
				
				</h:panelGrid>
				
			</p:panel>

			<p:separator/>

			<p:commandButton action="#{equipeAtletaBean.inserirAtletaNaEquipe}"	value="Inserir Atleta na Equipe" />

			<h:messages />
		</h:form>

	</ui:define>
</ui:composition>

</html>